<template>
<scroll class="suggest" :data="result" :pullup="pullup" @scrollToEnd="searchMore" ref="suggest" :beforeScroll="beforeScroll" @beforeScroll="listScroll">
  <ul class="suggest-list">
    <li class="suggest-item" v-for="item in result" @click="selectItem(item)">
      <div class="icon">
        <i :class="getIconCls(item)"></i>
      </div>
      <div class="name">
        <p class="text" v-html="getDisplayName(item)"></p>
      </div>
    </li>
    <loading v-show="hasMore" title=""></loading>
  </ul>
  <div class="no-result-wrapper" v-show="!hasMore && !result.length">
     <no-result title="抱歉，暂无搜索结果"></no-result>
  </div>
</scroll>
</template>

<script type="text/ecmascript-6">
  import {search} from 'api/search'
  import {ERR_OK} from 'api/config'
  import {createsong} from 'common/js/song'
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/load/load'
  import Singer from 'common/js/singer'
  import {mapMutations, mapActions} from 'vuex'
  import NoResult from 'base/no-result/no-result'
  const TYPE_SINGER = 'singer'
  const perpage = 20
export default {
  props: {
    query: {
      type: String,
      default: ' '
    },
    showSinger: {
      type: Boolean,
      default: true
    }
},
  data() {
    return {
      page: 1,
      result: [],
      pullup: true,
      hasMore: true,
      beforeScroll: true
    }
  },
  methods: {
    _search() {
      this.page = 1
      this.hasMore = true
      this.$refs.suggest.scrollTo(0, 0)
      search(this.query, this.page, this.showSinger, perpage).then((res) => {
        if (res.code === ERR_OK) {
          this.result = this._getResult(res.data)
          this._cheakMore(res.data)
        }
      })
    },
    searchMore() {
      if (!this.hasMore) {
       return
      }
      this.page ++
      search(this.query, this.page, this.showSinger, perpage).then((res) => {
        if (res.code === ERR_OK) {
          this.result = this.result.concat(this._getResult(res.data))
          this._cheakMore(res.data)
        }
      })
    },
    _cheakMore(data) {
        const song = data.song
      if (!song.list.length || (song.curpage * perpage) > song.totalnum) {
            this.hasMore = false
      }
    },
    _getResult(data) {
          let ret = []
          if (data.zhida && data.zhida.zhida_singer) {
              ret.push({...data.zhida.zhida_singer, ...{type: TYPE_SINGER}})
          }
          if (data.song) {
              ret = ret.concat(this._normalizeSongs(data.song.list))
          }
          return ret
    },
    _normalizeSongs(list) {
        let ret = []
      list.forEach((musicData) => {
            if (musicData.songid && musicData.albumid) {
                   ret.push(createsong(musicData))
            }
      })
      return ret
    },
    getIconCls(item) {
        if (item.type === TYPE_SINGER) {
            return 'icon-mine'
        } else {
            return 'icon-music'
        }
    },
    getDisplayName(item) {
        if (item.type === TYPE_SINGER) {
            return item.singerName
        } else {
            return `${item.name} - ${item.singer}`
        }
    },
    selectItem(item) {
        if (item.type === TYPE_SINGER) {
              const singer = new Singer({
                id: item.singerMID,
                name: item.singerName
              })
          this.$router.push({
            path: `/search/${singer.id}`
          })
          this.setSinger(singer)
        } else {
            this.insertSong(item)
        }
        this.$emit('select')
    },
    listScroll() {
        this.$emit('listScroll')
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    }),
    ...mapActions([
      'insertSong'
    ]),
    refresh() {
        this.$refs.suggest.refresh()
    }
  },
  watch: {
    query() {
        this._search()
    }
  },
  components: {
    Scroll,
    Loading,
    NoResult
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
.suggest
  height:100%
  overflow hidden
  .suggest-list
    padding: 0 30px
    .suggest-item
      display: flex
      align-items:center
      padding-bottom: 20px
    .icon
      flex:0 0 30px
      width: 30px
      [class^='icon-']
        font-size 14px
        color: $color-text-d
    .name
      flex:1
      font-size $font-size-medium
      color: $color-text-d
      overflow: hidden
      .text
        no-wrap()
  .no-result-wrapper
     position: absolute
     width:100%
     top:50%
     transform:translateY(-50%)
</style>
